<template>
  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
    <template #title>
      {{data.type}}组件编辑
    </template>
    <div class="setting-content">      
      <!-- 子组件属性 -->
      <div class="setting-body">
        <draggable
          v-model="data.data"
          :component-data="{
            tag: 'div',
            type: 'transition-group',
            name: !drag ? 'flip-list' : null
          }"
          v-bind="galleryDragOptions"
          :disabled="!shouldShowDragHandle(data.data)"
          @start="drag = true"
          @end="drag = false"
          item-key="id"
        >
          <template #item="{ element: timeLine }">
            <div
              class="item-section draggable-item"
              :class="{ 'sortable-disabled': !shouldShowDragHandle(data.data) }"
              :key="timeLine.id"
            >
              <div class="btn-group">
                <div
                  v-if="shouldShowDragHandle(data.data)"
                  class="drag-handle"
                >
                  <icon-drag-arrow class="drag-icon" />
                </div>
                <icon-delete class="btn-delete" @click="handleDelete(timeLine.id)" />
              </div>

              <p class="item-title">标题</p>
              <a-input v-model="timeLine.title" placeholder="请输入标题" allow-clear />
              <p class="item-title">描述</p>
              <RichTextEditor v-model="timeLine.desc" :name="`TimelineStory_editor_${timeLine.id}`"></RichTextEditor>

              <p class="item-title">gallery</p>
              <div class="section-item gallery-item">
                <draggable
                  v-model="timeLine.gallery"
                  :component-data="{
                    tag: 'div',
                    type: 'transition-group',
                    name: !drag ? 'flip-list' : null
                  }"
                  v-bind="sectionDragOptions"
                  :disabled="!shouldShowDragHandle(timeLine.gallery)"
                  @start="drag = true"
                  @end="drag = false"
                  item-key="id"
                >
                  <template #item="{ element: gallery }">
                    <div
                      class="item-button draggable-item"
                      :class="{ 'sortable-disabled': !shouldShowDragHandle(timeLine.gallery) }"
                      :key="gallery.id"
                    >
                      <div class="btn-group">
                        <div
                          v-if="shouldShowDragHandle(timeLine.gallery)"
                          class="drag-handle"
                        >
                          <icon-drag-arrow class="drag-icon" />
                        </div>
                        <icon-delete class="btn-delete" @click="handleDeleteGallery(timeLine.gallery, gallery.id)" />
                      </div>

                      <p class="item-title">图片</p>
                      <img class="item-img" :src="gallery.imgSrc" />
                      <div class="item-uplaod flex items-center">
                        <a-input v-model="gallery.imgSrc" placeholder="请输入图片链接" allow-clear />
                        <Upload v-model="gallery.imgSrc" :name="`TimelineStory_${gallery.id}`" button-class="fit-content" />
                      </div>
                    </div>
                  </template>
                </draggable>
                <div
                  class="item-add-btn flex items-center"
                  @click="handleAddGallery(timeLine.gallery)"
                >
                  <icon-plus />
                  <span class="btn-text">添加gallery</span>
                </div>
              </div>
            </div>
          </template>
        </draggable>
        <div
          class="item-add-btn flex items-center"
          @click="handleAdd()"
        >
          <icon-plus />
          <span class="btn-text">添加</span>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import Upload from '@/common/Upload/index.vue'
import { ref, computed, defineAsyncComponent } from 'vue'
// 动态导入 draggable，避免 SSR 问题
const draggable = defineAsyncComponent(() => import("vuedraggable"));
import { randomString } from '@/utils/common'
const RichTextEditor = defineAsyncComponent(() => import("@/common/RichTextEditor/index.vue"));

// 拖拽相关状态
const drag = ref(false)

// 不同类型的拖拽配置选项
const galleryDragOptions = computed(() => ({
  animation: 200,
  group: 'gallerys', // 链接专用分组
  disabled: false,
  ghostClass: 'ghost',
  handle: ".drag-handle", // 只有拖拽手柄才能触发拖拽
  filter: ".rich-text-editor, .arco-input, .arco-select, .arco-checkbox", // 排除这些元素的拖拽
  preventOnFilter: false, // 允许在被过滤的元素上进行正常交互
}))

const sectionDragOptions = computed(() => ({
  animation: 200,
  group: 'sections', // 链接专用分组
  disabled: false,
  ghostClass: 'ghost',
  handle: ".drag-handle", // 只有拖拽手柄才能触发拖拽
  filter: ".rich-text-editor, .arco-input, .arco-select, .arco-checkbox", // 排除这些元素的拖拽
  preventOnFilter: false, // 允许在被过滤的元素上进行正常交互
}))

// 检查是否应该显示拖拽图标
const shouldShowDragHandle = (list: any[]) => {
  return list && list.length > 1
}

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },

  data: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['update:show']);

const handleCancel = () => {
  emit('update:show', false);
}

const handleAdd = () => {
  const detail = props.data;
  detail.data.push({
    id: randomString(),
    title: '标题',
    desc: '',
    gallery: []
  })
}

const handleDelete = (id: string) => {
  props.data.data = props.data.data.filter((item: any) => item.id !== id)
}

const handleAddGallery = (gallery: any) => {
  gallery.push({
    id: randomString(),
    imgSrc: '',
  })
}

const handleDeleteGallery = (gallery: any, id: string) => {
  gallery.splice(
    gallery.findIndex((item: any) => item.id === id),
    1
  );
}
</script>

<style lang="scss" scoped>
.setting-content {
  .setting-header {
    padding-bottom: 12px;

    .header-title {
      width: 120px;
      padding-right: 12px;
      text-align: right;
    }
  }

  .btn-setting {
    position: relative;
    padding: 16px 12px;
    background: #f0f2f5;
    border-radius: 8px;
    margin-bottom: 20px;

    .btn-group {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      padding: 4px;

      .btn-delete {
        padding: 4px;
        font-size: 24px;
        cursor: pointer;
      }
    }

    .arco-input-wrapper {
      background: #fff;
    }
  }

  .setting-body {
    background: #f0f2f5;
    border-radius: 8px;
    padding: 12px;
    
    .item-section {
      position: relative;
      padding: 36px 12px 16px;
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;

      .btn-group {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        padding: 4px;

        .btn-delete {
          padding: 4px;
          font-size: 24px;
          cursor: pointer;
        }
      }

      .section-item {
        .item-name {
          font-size: 16px;
          font-weight: 600;
          padding-bottom: 10px;
          border-bottom: 1px solid #fff;
        }

        .item-button {
          position: relative;
          padding: 12px 8px 4px;
          background: #fff;
          border-radius: 4px;
          margin: 4px 0;
          transition: all 0.3s ease;

          &.draggable-item {
            // 移除 cursor: move，只在拖拽图标上显示拖拽光标

            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);
            }

            // 当禁用拖拽时，不显示拖拽效果
            &.sortable-disabled {
              &:hover {
                box-shadow: none;
                transform: none;
              }
            }
          }

          .arco-input-wrapper {
            background: #f2f3f5;
          }
        }

        // 拖拽相关样式
        .flip-list-move {
          transition: transform 0.5s;
        }

        .no-move {
          transition: transform 0s;
        }

        .ghost {
          opacity: 0.5;
          background: #c8ebfb;
        }

        .item-action {
          padding: 10px 0;

          .action-text {
            width: 150px;
            margin-right: 8px;
          }
        }

        .item-img {
          height: 100px;
        }
      }
    }
  }

  .gallery-item {
    background: #f0f2f5;
    border-radius: 8px;
    padding: 12px;
  }

  .drag-handle {
    padding: 4px;
    cursor: grab;
    padding: 4px;
    border-radius: 4px;

    &:hover {
      background-color: #f0f2f5;
    }

    &:active {
      cursor: grabbing;
    }

    .drag-icon {
      font-size: 16px;
      color: #86909c;
    }
  }

  .item-add-btn {
    display: inline-block;
    padding: 2px 8px;
    margin-top: 5px;
    font-size: 11px;
    color: #165dff;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid #165dff;
    cursor: pointer;
  }
}
</style>